
namespace("controls.Panel", 
{
	'@inherits' : 		w3c.HtmlComponent,
	'@stylesheets' :  ["/" + appconfig.namespace + "/cdn/css/Panel.css"],
	'@nativednd' : false,
	'@traits'  : [Draggable],
	
	initialize : function(){
		/*var elem = this.element;
		elem.onselectstart = function() { return false; };
	    elem.style.MozUserSelect = "none";
	    elem.style.KhtmlUserSelect = "none";
	    elem.unselectable = "on";*/
    	
		this.addEventListener("dragstart", 	this.ondragstart.bind(this), 	false);
		this.addEventListener("drag", 			this.ondrag.bind(this), 		false);
		this.addEventListener("dragover", 	this.ondragover.bind(this), 	false);
		this.addEventListener("dragenter", 	this.ondragenter.bind(this), false);
		this.addEventListener("dragleave",	this.ondragleave.bind(this), false);
		this.addEventListener("drop", 			this.ondrop.bind(this), 		false);
		this.addEventListener("dragend",		this.ondragend.bind(this), 	false);
	},
	
	ondragend : function(e){
		
	},
	
	ondrag : function(e){
	},
	
	ondragstart : function(e, src) {
		//if(src != this) { e.preventDefault()}
		console.log("panel -> " + e.phaseName)
		e.dataTransfer.setData('Text', this.element.getAttribute("cuuid"));
	},
	
	ondragleave : function(e){
		this.removeClass("over")
	},
	
	ondrop : function(e) {
		this.removeClass("over")
		if (e.preventDefault) {
            //e.preventDefault();
        }
		var cuuid = e.dataTransfer.getData('Text');
		var draggable = $(".Box[cuuid='" + cuuid + "']")[0];
		this.appendChild(draggable);
        return false;
	},
	
	ondragover : function(e) {
		this.querySelector(".titlebar").innerHTML = ("Mouse Cirection: " + e.location.direction.horizontal + ",  " + e.location.direction.vertical)
		
		if(!this.hasClass("over")) { this.addClass("over") }
        if (e.preventDefault) {
            //e.preventDefault();
        }
        return false;
	},
	
	ondragenter : function(e) {
		console.log("drag enter");
       if (e.preventDefault) {
            //e.preventDefault();
        }
        return false;
	},

	innerHTML:
	'<div class="Panel" draggable="false" droppable="true" unselectable="on">\
		<div class="titlebar" unselectable="on">title bar</div>\
		<div containment="replace" class="CheckBox" namespace="controls.CheckBox" draggable="false"></div>\
		<div class="shadow"></div>\
	</div>',
	
	getVal : function(){ return "-50px;" },

	cssText: 
	'.Panel .shadow { bottom: <%@ self.getVal() %> }'
});
